<!--
    @name 预约管理
    @author 丁浩洋
    @time 2021-1-21
 -->
<template>
  <section class="appointment-select">
    <OneTableTemplate
      ref="multipleTable"
      :dynamic-components="tableComponents"
      :dynamic-buttons="formButtons"
      :dynamic-table-cols="tableHeader"
      :dynamic-form-fields="formField"
      :dynamic-is-init-table="true"
      :dynamic-api-config="apiConfig"
      :dynamic-is-show-select="false"
    />
    <appointment-tegistrations
      :key="editPopupsKey"
      :popups-visible.sync="editPopupsVisible"
      :popups-state="editPopupsState"
      :dynamic-text-map="textMap"
      :dynamic-edit-row-data="editRowData"
      dynamic-api-style="restful"
    />
  </section>
</template>

<script>
import { exportExcel } from '@/utils/exportExcel'
import OneTableTemplate from '@/components/templates/oneTable'
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import appointmentTegistrations from '@/components/se/appointmentSelect/appointmentTegistrations'
import mapi from '@/views/se/appointmentManage/appointmentSelect/mapi'
export default {
  name: 'AppointmentSelect',
  components: {
    OneTableTemplate,
    appointmentTegistrations
  },
  mixins: [oneTableWithViewTemplateMixins],
  data() {
    return {
      apiConfig: mapi.queryAppointmentManagePagesUsingPOST,
      formField: {},
      textMap: {
        add: '预约登记',
        edit: '预约详情'
      },
      open: false,
      tableComponents: [
        {
          compKey: 'key0',
          labelName: '预约日期：',
          codeField: 'appointDateStart,appointDateEnd',
          isMul: false,
          component: () => import('@/components/org/datePicker/datePicker'),
          dateType: 'daterange',
          isMust: true
        },
        {
          compKey: 'key1',
          labelName: '车牌号：',
          codeField: 'carLicense',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          isInput: true,
          isMust: true
        },
        {
          compKey: 'key2',
          labelName: 'VIN码：',
          codeField: 'vin',
          isInput: true,
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true
        },
        {
          compKey: 'key3',
          labelName: '预约状态：',
          codeField: 'reserveState',
          lookuptype: 'SE0024',
          component: () => import('@/components/org/commonSelect'),
          customObj: {
            api: {
              APIUrl:
                '/mp/e3sh/aftersale/appointmentVolumnService/queryListOfValues.do'
            }
          },
          type: 'dropdownList',
          isMust: true
        },
        {
          compKey: 'key4',
          labelName: '客户姓名：',
          codeField: 'custName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isInput: true,
          isMust: true
        },
        {
          compKey: 'key5',
          labelName: '预约人：',
          codeField: 'reserveMan',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isInput: true,
          isMust: true
        },
        {
          compKey: 'key6',
          labelName: '联系电话：',
          codeField: 'reserveTel',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          isInput: true,
          type: 'inputText',
          isMust: true
        },
        {
          compKey: 'key7',
          labelName: '预约来源：',
          codeField: 'reserveSource',
          lookuptype: 'SE0171',
          component: () => import('@/components/org/commonSelect'),
          customObj: {
            api: {
              APIUrl:
                '/mp/e3sh/aftersale/appointmentVolumnService/queryListOfValues.do'
            }
          },
          type: 'dropdownList',
          isMust: true
        },
        {
          compKey: 'key8',
          labelName: '服务顾问：',
          codeField: 'saEmpId',
          component: () => import('@/components/org/commonSelect'),
          oFields: 'saEmpId,empName',
          customObj: {
            api: {
              APIUrl:
                '/mp/e3sh/aftersale/WorkOrderManagementService/serviceConsultant.do'
            }
          },
          type: 'dropdownList',
          isMust: true
        }
      ],
      formButtons: [
        {
          compKey: 'btnKey0',
          type: 'primary',
          size: 'small',
          clickEvent: (index) => this.add(),
          text: '新增',
          name: 'add',
          position: 'left'
        },
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.queryTable(),
          text: '查询',
          name: 'search',
          position: 'right'
        },
        {
          compKey: 'btnKey2',
          type: '',
          size: 'small',
          clickEvent: () => {
            exportExcel.call(
              this,
              mapi.queryAppointmentOrdersExportUsingPOST.APIUrl
            )
          },
          text: '导出', // 查询
          name: 'export', // 按钮图标样式
          position: 'left'
        },
        {
          compKey: 'btnKey4',
          type: '',
          size: 'small',
          clickEvent: () => this.reset(1),
          text: '重置', // 查询
          name: 'reset', // 按钮图标样式
          position: 'right'
        }
      ],
      tableHeader: [
        {
          prop: 'controlBtn',
          label: '操作', // 操作
          codeField: 'orgName',
          width: null,
          align: 'center',
          isComponent: true,
          comps: [
            {
              compKey: 'propKey0',
              align: 'center',
              labelName: '修改',
              codeField: 'orgName',
              clickEvent: (index) => {
                this.editRowData = this.$utils.deepCopy(
                  this.$refs['multipleTable'].list[index]
                )
                this.showEdit('edit')
              },
              component: () => import('@/components/org/linkButton')
            }
          ]
        },
        {
          label: '预约单号',
          prop: 'reserveOrderCode',
          width: 140
        },
        {
          label: '车牌号',
          prop: 'carLicense'
        },
        {
          label: 'VIN码',
          prop: 'vin',
          width: 140
        },
        {
          label: '客户名称',
          prop: 'custName'
        },
        {
          label: '预约人',
          prop: 'reserveMan'
        },
        {
          label: '预约电话',
          prop: 'reserveTel',
          width: 140
        },
        {
          label: '预约时间',
          prop: 'appointDate',
          width: 140
        },
        {
          label: '预约状态',
          prop: 'reserveStateName'
        },
        {
          label: '服务顾问',
          prop: 'empName'
        },
        {
          label: '预约来源',
          prop: 'reserveSource'
        },
        {
          label: '创建预约时间',
          prop: 'createdDate',
          width: 140
        },
        {
          label: '取消说明',
          prop: 'cancelReason',
          width: 140
        },
        {
          label: '审核意见',
          prop: 'auditFlag'
        }
      ]
    }
  },

  created() {
    this.genFormField()
  },
  methods: {
    genFormField() {
      const viewPageCode = this.$route.path
      this.genCodeFiled = this.genUtil(this.tableComponents)
      const formField = this.genCodeFiled()
      this.formField = this.$utils.getFormField(
        this,
        formField,
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      )
    },
    // 生成formField
    genUtil:
      (array) =>
        (attr1 = 'codeField', attr2 = 'textField') =>
          array.reduce((p, c) => {
            if (c[attr1].includes(',')) {
              const d = c[attr1].split(',')
              for (let i = 0; i < d.length; i++) {
                p[d[i]] = ''
              }
            } else {
              p[c[attr1]] = ''
            }
            // eslint-disable-next-line no-prototype-builtins
            c.hasOwnProperty(attr2) ? (p[c[attr2]] = '') : ''
            return p
          }, {})
  }
}
</script>

<style lang="scss" scoped>
</style>
